import React from 'react';
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux'
import orderListAction from '../actions/orderListAction'
import MHeader from '../../../components/m-header/m-header.jsx';
import ItemList from './itemList/itemList.jsx'
// import ScrollView from '../../../components/scrollView/scrollView.jsx'
import Scroll from 'react-bscroll'
require("style-loader!css-loader!react-bscroll/lib/react-scroll.css");

import './order.scss';
/**
 * @constructor <Order />
 * @description 首页盒子
 */
class Order extends React.Component {

    constructor(props) {
      super(props)
      this.state = {
        isend: false, // 是否加载完毕
          loadingMsg: '加载中..'
      }
      this.fetchData()
    }

    params = {
      page: 0,
      totalPage: 3
    }

    fetchData() {
      this.props.getOrderListAction(this.params.page);
    }

    renderList() {
      let list = this.props.list
      return list.map((item, index) => {
        return <ItemList key={index} itemData={item}></ItemList>
      })
    }


    loadPage() {
      this.params.page ++;
      if(this.params.page >= this.params.totalPage) {
        // 加载完毕
        this.setState({
          isend: true,
            loadingMsg: '加载中..'
        });
      } else {
        this.fetchData()
      }
    }

    loadMoreData = () => {
        console.log(this.params.page, this.params.totalPage)
        if(this.params.page >= this.params.totalPage) {
            return Promise.resolve()
        }
        return new Promise((resolve) => {
            this.params.page ++;
            if(this.params.page >= this.params.totalPage) {
                // 加载完毕
                this.setState({
                    isend: true,
                    loadingMsg: '加载完毕'
                });
            } else {
                this.fetchData()
                setTimeout(() => {
                    resolve()
                }, 1000)
            }

        })

    }

    pullDownFreshAction = () => {
        let _this = this
        return new Promise((resolve) => {
            _this.setState({
                isend: false
            })
            _this.params.page = 0
            this.fetchData()
            setTimeout(() => {
                resolve()
            }, 500)
        })
    }
    render(){
        return (
            <div className="order-wrapper">
                <Scroll scrollbar={false}
                        pullUpLoad
                        pullUpLoadMoreData={this.loadMoreData}
                        isPullUpTipHide={ true }
                        pullDownRefresh
                        doPullDownFresh={this.pullDownFreshAction}
                >
                    <MHeader title="我的订单"></MHeader>
                    <div className="order-list">{this.renderList()}</div>
                    <div className="loadingTip">{this.state.loadingMsg}</div>
                </Scroll>
            </div>
        );
    }
}


export default connect(
  (state) => {
    return {
      list: state.orderListReducer.list
    }
  },
  (dispatch) => {
    return {
      getOrderListAction: bindActionCreators(orderListAction, dispatch)
    }
  }
)(Order);
